<template>
	<view class="goods-list">
		<goods-list @goodsClick="toDetail" :goods="goods"></goods-list>
		<view v-if="finish" class="is-over">-----我是有底线的-----</view>
	</view>
</template>

<script>
	
	import {getGoodsList} from '@/api/index/goods.js'
	
	import GoodsList from '@/components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				goods: [],
				page: 1,
				finish: false
			}
		},
		methods: {
			/**
			 * 获取商品列表
			 * @param {Object} callback 数据处理完后的回调函数
			 */ 
			getGoodsList(callback) {
				getGoodsList(this.page).then(res => {
					if (!res.data.message.length) {
						this.finish = true;
						return;
					}
					this.goods.push(...res.data.message);
					callback && callback();
				})
			},
			/**
			 * 跳转到商品详情页
			 */
			toDetail(id) {
				console.log(".....")
				uni.navigateTo({
					url: '/pages/index/goods/detail?id=' + id
				})
			}
		},
		onLoad() {
			this.getGoodsList();
		},
		/**
		 * 监听上拉加载更多
		 */
		onReachBottom() {
			// 如果没有数据了，就不调用
			if (this.finish) {
				return;
			}
			this.page++;
			this.getGoodsList();
		},
		/**
		 * 监听下拉刷新
		 */
		onPullDownRefresh() {
			this.page = 1;
			this.goods = [];
			this.finish = false;
			setTimeout(() => {
				this.getGoodsList(() => {
					uni.stopPullDownRefresh();
				});
			}, 1000);
		},
		components: {
			GoodsList
		}
	}
</script>

<style scoped lang="scss">
	@import "~@/static/css/index/goods.scss";
</style>
